<script setup lang='ts'>
    import {onMounted, ref} from 'vue'
    import * as echarts from 'echarts'
    const charts = ref<any>()
        onMounted(() => {
        // 获取echarts实例
        const mycharts = echarts.init(charts.value)
        mycharts.setOption({
            // 标题组件
            title: {
                // 主标题
                text: '散点图',
                // 主标题文字样式
                textStyle: {
                    color: 'yellowgreen',
                    fontSize: 20
                },
                // 标题的位置
                left: '50%',
               
            },
            // x,y轴组件
            xAxis: {
                type: 'category', // 图形再x轴均匀分布展示
                show: true
            },
            yAxis: {
                show: false
                // // 不要分割线
                // splitLine: {
                //     show: false
                // },
            },
            grid: {
                left: 20,
                bottom: 20,
                right: 20
            },
            // 系列
            series: [
                {
                    type: 'scatter',
                    data: [323, 828, 221, 932, 788, 1221, 999, 298, 2992, 99, 23, 83],
                    // 散点图形
                    symbol: 'diamond',
                    symbolSize: 16,
                    // 图文标签
                    label: {
                        show: true,
                        position: 'top',
                        color: 'yellow'
                    },
                    // 散点图标记的颜色
                    itemStyle: {
                        color: {
                            // 每一个图形的样式
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                offset: 0, color: '#ee4f18' // 0% 处的颜色
                            }, {
                                offset: 1, color: '#edc12b' // 100% 处的颜色
                            }],
                            global: false // 缺省为 false
                        },
                    }
                }
            ],
           
        })
    })
</script>


<template>
    <div class="box7">
        <div class="title">
            <Title title="年度游客量对比"></Title>
        </div>
        <div ref="charts" class="charts"></div>
    </div>
</template>


<style scoped lang='scss'>
    .box7{
        width: 100%;
        height: 100%;
        background: url('@/views/screen/images/dataScreen-main-cb.png') no-repeat;
        background-size: 100% 100%;
        margin: 10px 0;
        .charts{
            height: calc(100% - 30px);
        }
    }
</style>